<template>
  <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
insertCss(`
  .g6-tooltip {
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    padding: 2px 8px;
    text-align: center;
  }
`);
const data = {
  //节点
  nodes: [
    {
      id: "1",
      name: "**上报",
      x: 280,
      y: 30,
      anchorPoints: [
        [0.5, 0.5],
        [1, 0.5],
        [0, 0.5],
      ],
    },
    {
      id: "2",
      name: "**受理",
      x: 280,
      y: 150,
      anchorPoints: [
        [0.5, 0],
        [1, 0.5],
        [0.5, 1],
      ],
    },
    {
      id: "3",
      name: "**上报",
      x: 450,
      y: 100,
      anchorPoints: [
        [0, 0.5],
        [1, 0.5],
      ],
    },
    {
      id: "4",
      name: "***初审",
      x: 30,
      y: 250,
      anchorPoints: [
        [0.5, 0],
        // [1, 0.5],
      ],
    },
    {
      id: "5",
      name: "**初审",
      x: 180,
      y: 250,
    },
    {
      id: "6",
      name: "***经办人初审",
      x: 350,
      y: 250,
    },
    {
      id: "7",
      name: "***经办人初审",
      x: 500,
      y: 250,
      anchorPoints: [[0.5, 0]],
    },
    {
      id: "8",
      name: "***经办人初审",
      x: 700,
      y: 250,
      anchorPoints: [[0.5, 0]],
    },
    {
      id: "9",
      name: "***审核",
      x: 180,
      y: 330,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
      ],
    },
    {
      id: "10",
      name: "***审核",
      x: 350,
      y: 330,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
      ],
    },
    {
      id: "11",
      name: "***审核",
      x: 500,
      y: 330,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
      ],
    },
    {
      id: "12",
      name: "***审核",
      x: 700,
      y: 330,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
      ],
    },
    {
      id: "13",
      name: "***汇总意见并拟审核意见",
      x: 400,
      y: 430,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
      ],
    },
    {
      id: "14",
      name: "**审核",
      x: 400,
      y: 520,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
        [1, 0.5],
        [0, 0.5],
      ],
    },
    {
      id: "15",
      name: "***审核",
      x: 400,
      y: 620,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
        [1, 0.5],
        [0, 0.5],
      ],
    },
    {
      id: "16",
      name: "**审稿",
      x: 400,
      y: 720,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
        [0, 0.5],
        [1, 0.5],
      ],
    },
    {
      id: "17",
      name: "***审核",
      x: 400,
      y: 820,
      anchorPoints: [
        [0.5, 0],
        [0.5, 1],
        [1, 0.5],
        [0, 0.5],
      ],
    },
    {
      id: "18",
      name: "**审核",
      x: 400,
      y: 920,
      anchorPoints: [
        [0.5, 0],
        [0.3, 1],
        [0.7, 1],
        [0, 0.5],
      ],
    },
    {
      id: "19",
      name: "**审核",
      x: 400,
      y: 1020,
      anchorPoints: [
        [1, 0.5],
        [0.3, 0],
        [0.7, 0],
        [0.5, 1],
      ],
    },
    {
      id: "20",
      name: "****",
      x: 600,
      y: 1020,
      anchorPoints: [
        [0, 0.5],
        [0.5, 1],
        [0.5, 0],
        [1, 0.5],
      ],
    },
    {
      id: "21",
      name: "***初审",
      x: 800,
      y: 1020,
      anchorPoints: [
        [0, 0.5],
        [0.5, 1],
        [0.5, 0],
        [1, 0.5],
      ],
    },
    {
      id: "22",
      name: "***审核",
      x: 1000,
      y: 1020,
      anchorPoints: [
        [0, 0.5],
        [0.5, 1],
        [0.5, 0],
        [1, 0.5],
      ],
    },
    {
      id: "23",
      name: "***审核",
      x: 1200,
      y: 1020,
      anchorPoints: [
        [0, 0.5],
        [1, 0.7],
        [0.5, 0],
        [1, 0.3],
      ],
    },
    {
      id: "24",
      name: "***审批",
      x: 1400,
      y: 1020,
      anchorPoints: [
        [0, 0.3],
        [0, 0.7],
        [0.5, 1],
      ],
    },
    {
      id: "25",
      name: "***文件编号",
      x: 1400,
      y: 1120,
    },
    {
      id: "26",
      name: "文印室打印",
      x: 1400,
      y: 1220,
    },
    {
      id: "27",
      name: "文件归档",
      x: 1400,
      y: 1320,
    },
    {
      id: "28",
      name: "结束",
      x: 1400,
      y: 1420,
    },
  ],
  //边
  edges: [
    {
      source: "1", //起点id
      target: "2", //目标点id
      label: "上报",
      style: {
        stroke: "#0ff",
        endArrow: {
          fill: "#0f0",
        },
      },
    },
    {
      source: "3",
      target: "2",
      targetAnchor: 1,
    },
    {
      source: "3",
      target: "1",
    },
    {
      source: "2",
      target: "4",
    },
    {
      source: "2",
      target: "5",
    },
    {
      source: "2",
      target: "6",
    },
    {
      source: "2",
      target: "7",
      sourceAnchor: 2,
    },
    {
      source: "2",
      target: "8",
      sourceAnchor: 2,
    },
    {
      source: "5",
      target: "9",
    },
    {
      source: "6",
      target: "10",
    },
    {
      source: "7",
      target: "11",
    },
    {
      source: "8",
      target: "12",
    },
    {
      source: "9",
      target: "13",
    },
    {
      source: "10",
      target: "13",
    },
    {
      source: "11",
      target: "13",
    },
    {
      source: "12",
      target: "13",
      label: "专家论证报告",
      labelCfg: {
        position: "end",
        refY: 35,
        refX: -10,
      },
    },
    {
      source: "13",
      target: "14",
    },
    {
      source: "14",
      target: "15",
      label: "通过",
    },
    {
      source: "14",
      target: "1",
      sourceAnchor: 3,
      targetAnchor: 2,
      label: "补正/退件",
      labelCfg: {
        position: "middle",
        refX: 10,
        refY: 400,
      },
      type: "k-edge",
    },
    {
      source: "15",
      target: "14",
      sourceAnchor: 2,
      targetAnchor: 2,
      label: "不通过",
    },
    {
      source: "15",
      target: "16",
      label: "通过",
    },
    {
      source: "16",
      target: "15",
      sourceAnchor: 2,
      targetAnchor: 3,
      label: "不通过",
    },
    {
      source: "16",
      target: "17",
      label: "通过",
    },
    {
      source: "17",
      target: "18",
      label: "通过",
    },
    {
      source: "18",
      target: "17",
      sourceAnchor: 3,
      targetAnchor: 3,
      label: "不通过",
    },
    {
      source: "17",
      target: "16",
      sourceAnchor: 2,
      targetAnchor: 3,
      label: "不通过",
    },
    {
      source: "18",
      target: "19",
      sourceAnchor: 1,
      targetAnchor: 1,
      label: "通过",
    },
    {
      source: "19",
      target: "18",
      sourceAnchor: 2,
      targetAnchor: 2,
      label: "不通过",
    },
    {
      source: "19",
      target: "20",
      label: "通过",
    },
    {
      source: "20",
      target: "19",
      label: "不通过",
      sourceAnchor: 1,
      targetAnchor: 3,
    },
    {
      source: "20",
      target: "21",
      label: "通过",
    },
    {
      source: "21",
      target: "20",
      label: "不通过",
      sourceAnchor: 2,
      targetAnchor: 2,
    },
    {
      source: "21",
      target: "22",
      label: "通过",
    },
    {
      source: "22",
      target: "21",
      label: "不通过",
      sourceAnchor: 1,
      targetAnchor: 1,
    },
    {
      source: "22",
      target: "23",
      label: "通过",
    },
    {
      source: "23",
      target: "22",
      label: "不通过",
      sourceAnchor: 2,
      targetAnchor: 2,
    },
    {
      source: "23",
      target: "24",
      label: "通过",
      sourceAnchor: 3,
      targetAnchor: 0,
    },
    {
      source: "24",
      target: "23",
      label: "不通过",
      sourceAnchor: 1,
      targetAnchor: 1,
    },
    {
      source: "24",
      target: "25",
      label: "通过",
    },
    {
      source: "25",
      target: "26",
    },
    {
      source: "26",
      target: "27",
    },
    {
      source: "27",
      target: "28",
    },
  ],
};
G6.registerNode(
  "sql",
  {
    drawShape(cfg, group) {
      const rect = group.addShape("rect", {
        attrs: {
          x: -60,
          y: -25,
          width: 120,
          height: 50,
          radius: 10,
          stroke: "#5B8FF9",
          fill: "#C6E5FF",
          lineWidth: 2,
        },
        name: "rect-shape",
      });
      if (cfg.name) {
        const name =
          cfg.name.length > 8
            ? cfg.name.substring(0, 8) +
              "\n" +
              cfg.name.substring(8, cfg.name.length)
            : cfg.name;
        group.addShape("text", {
          attrs: {
            text: name,
            x: 0,
            y: 0,
            fill: "#333",
            fontSize: 12,
            textAlign: "center",
            textBaseline: "middle",
            fontWeight: "bold",
          },
          name: "text-shape",
        });
      }
      return rect;
    },
  },
  "single-node"
);
G6.registerEdge("hvh", {
  draw(cfg, group) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;
    const shape = group.addShape("path", {
      attrs: {
        stroke: "#333",
        path: [
          ["M", startPoint.x, startPoint.y],
          ["L", endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处
          ["L", endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处
          ["L", endPoint.x, endPoint.y],
        ],
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: "path-shape",
    });
    return shape;
  },
});
G6.registerEdge("k-edge", {
  draw(cfg, group) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;
    const shape = group.addShape("path", {
      attrs: {
        stroke: "#409EFF",
        path: [
          ["M", startPoint.x, startPoint.y],
          ["L", -endPoint.x + (1 / 3) * startPoint.x, startPoint.y], // 三分之一处
          ["L", -endPoint.x + (1 / 3) * startPoint.x, endPoint.y], // 三分之二处
          ["L", endPoint.x, endPoint.y],
        ],
        endArrow: {
          path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
          d: 0,
          fill: "#409EFF",
          opacity: 0.5,
          lineWidth: 1,
        },
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: "path-shape",
    });
    if (cfg.label) {
      group.addShape("text", {
        attrs: {
          text: cfg.label,
          x: -130,
          y: 280,
          fill: "#333",
        },
        name: "text-shape",
      });
    }
    return shape;
  },
});

export default {
  data() {
    return {
      graph: "",
      data: {},
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.data = data;
      const mountNode = document.getElementById("mountNode");
      const width = mountNode.scrollWidth;

      const height = mountNode.scrollHeight || 750;
      this.graph = new G6.Graph({
        container: "mountNode", // 指定挂载点
        // 画布宽高
        width,
        height,
        defaultNode: {
          type: "sql",
        },
        //边的样式配置
        defaultEdge: {
          type: "polyline",
          // 边样式配置
          style: {
            stroke: "#409EFF", // 边描边颜色
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 0,
              fill: "#409EFF",
              opacity: 0.5,
              lineWidth: 1,
            },
          },
          labelCfg: {
            position: "center",
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
        },
        
        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
            "click-select",
            {
              type: "tooltip",
              formatText(model) {
                // console.log(model)
                // const cfg = model.conf;
                // const text = [];
                // if(cfg) cfg.forEach((row) => {
                // text.push(row.label + ':' + row.value + '<br>');
                // });
                // return text.join('\n');
                return model.name;
              },
              offset : 30
            },
          ],
        },
        fitView: true,
        // fitViewPadding: -10
      });
      //读取数据
      this.graph.data(this.data);
      // 渲染图
      this.graph.render();
      this.bindEvents();
      this.graph.fitView();
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!this.graph || this.graph.get("destroyed")) return;
          if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight)
            return;
          this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
        };
    },

    bindEvents() {
      this.graph.on("node:click", (e) => {
        //节点绑定点击事件
        if (e.item) {
          console.log(e.item);
        }
      });
    },
  },
};
</script>
 
<style scoped>
</style>